
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="menu.css" />
 
<script type="text/javascript"   src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript" >
// jQuery Document  
function closeChatWin(){
alert("Hi Surendra");
$("body").find("#chat_windows").addClass("close_chat_windows");
}
/*$(document).ready(function(){  
    //If user wants to end session  
    $("#exit").click(function(){  
       
    });  
});*/  
</script>

<script language="javascript" type="text/javascript">
/*function staticGlobal()
{
	var roomClickedFirst="false";
	
}
*/
 var roomClickedFirst=0;
var resp;
  function syncAjax(urlId,typeC)
  {
  alert("1111111111111"); 
            $.ajax({
                    type: 'GET',
                    url: urlId,
                    async: true,
                    contentType: "application/json",
                    dataType: 'json',
                    success: function (resp) {
                    				if(typeC=="roomList")	
                                          		    roomList(resp);
                                                else if(typeC=="onlineList")
                                                	    onlineList(resp);
              	                              },
                    error: function(e){
                                     alert("error"+e.status);
                                                                                                                                                                                                        }
		  });
   }

function onlineList(rsl)
{

	for(var i=0;i<rsl.length;i++)
	{
		var ul = document.getElementById("onlineFrnds");
		var li = document.createElement("li");
		li.innerHTML=rsl[i].avatarName;
		ul.insertBefore(li, ul.getElementsByTagName("li")[i]);
	}
}

function roomList(rsl)
{
	alert(rsl[0].id);
	for(var i=0;i<rsl.length;i++)
	{
		var ul = document.getElementById("roomList");
		var li = document.createElement("li");
		li.innerHTML=rsl[i].roomTitle;
		li.id=rsl[i].id;
		ul.insertBefore(li, ul.getElementsByTagName("li")[i]);
		document.getElementById(rsl[i].id).onclick=function()
		{ 
			roomClicked(this.id); 
		} 
	}
     var urlId="/tiskus/api/v1/tiskusUser/get/avatars/";
     var type="onlineList";
     syncAjax(urlId,type);
}

function roomClicked(id)
{
	alert("room clicked"+id);
	if(roomClickedFirst==0)
	{
		roomClickedFirst++;
		document.getElementById("roomChatContainer").style.visibility="visible";		
	}
	 document.getElementById("roomName").innerHTML=document.getElementById(id).innerHTML;
	

	
}

function initPage()
{
var urlId="/tiskus/api/v1/interests/explore/ajay";
var type="roomList";
syncAjax(urlId,type);
}
</script>
<style type="text/css">
.close_chat_windows
{
display:none;
}
</style>
</head>

<body onload="initPage()" style="background-image:url(images/bg.png) repeat-x;">

<div class="header"><!-- Header Area-->

<div class="header_line_content" style="background:#FFF" ><!-- Start Header Content Area-->

        	<div style="float:left"><div style="width:160px; height:90px; background:url(images/u2opia_mobile_logo.png); margin-left:1px;"></div></div>
             
            <div style="float:right; padding-top:6px">
            	<div style="width:auto; height:90px">
                	<div style="float:left">
                    	<div style="width:210px"><span style="float:left; color:#B30000; font-family:Arial, Helvetica, sans-serif; font-size:16px">Wellcome :</span><div style="float:left;color:#AB1000;font-family:Arial, Helvetica, sans-serif; font-size:16px; padding-left:5px;">Surendra Singh</div><div style="float:left;color:#B30000;font-family:Arial, Helvetica, sans-serif; font-size:16px; padding-left:75px;">Location : <span style="color:#323232;">Noida</span></div><div style="float:left;color:#323232;font-family:Arial, Helvetica, sans-serif; font-size:16px; padding-left:75px;">(M) 9910712928</div></div>
                    </div> 
                	<div style="float:right; background:url(images/1.png); width:78px; height:74px; padding-top:5px;"><span style="padding-left:4px;"><img src="friends/DSC02384.JPG" width="69px" height="69px;" /></span></div>  
                     	
                    
                </div>
          </div>

</div><!-- END Header Content Area-->

</div><!-- END Header Area-->

<div id="content"><!-- COntent Area-->


<div><!-- Header With in content named Welcome Area-->
<div style=" height:30px; background:url(images/header_bg.png) repeat-x;">
<div style="width:1000px; height:30px; background:url(images/header_bg.png) repeat-x; padding-top:7px;">
	
    <div style="float:right; width:100%; font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#8F0000; font-weight:500;">
    	<span style="float:right; margin-right:10px; color:#FFFFFF; font-size:14px; font-weight:300">Logout</span><div style="z-index:50"></div>
		
    </div>
</div>


</div><!-- END Header With in content named Welcome Area-->



 <!--Main Content Goes Here -->
<div id="content">
    <div id="sideBar">
        <div id="leftcolumn">
				<div class="titlebar" style="margin-top: 0px">ROOMS</div>
                	<div  class="menu_border" style="border:#CCC 2px solid; margin-top:4px; padding-left:8px; padding-right:5px; background:url(images/service-header1_bg.png) repeat-x; color:3C3C3C;">
					<ul id="roomList" class="ddmarkermenu" style="cursor:pointer">
						<li></li>
                        
					</ul>
					</div>
		</div>
   </div>
		<div id="mainContent" style="margin-left:2px;">
        	<div id="roomChatContainer" style="visibility:hidden">
            	<div id="chat_room_header" >
                		<div id="roomName" style="height:30px;color:#FFF; background:#990033; width:351px;">Rooms Name</div>
                        <div style="height:230px; width:100%; text-align:left">
                        	<textarea name="chat_room_container" readonly="readonly" style="width:345px; height:224px; float:left;resize: none; overflow-y: auto; text-align:left;">Hi Surendrawwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</textarea>
                        </div>
                        <div style="height:30px; width:100%px; border-top:1px solid #CCC;">
                        	<textarea name="chat_room" style="width:270px; height:23px; float:left;resize: none; overflow-y: auto; border: 1px ridge #999999" ></textarea>
                            <input type="button" value="Send" class="btn-tertiary" />
                        </div>
                </div>
            	<div style="float:right;border-left:1px solid #CCC;">
                	<div style="height:30px;color:#FFF; background:#990033; width:152px;">User Details<span style="float:right; margin-right:5px;"><a  style="color:#FFF" href="#">X</a></span></div>
                    <div id="UserDetailsContainer" style="overflow-y: auto; width:152px; height:260px;text-align:left;">
                    		<ul id="onlineRooms" class="UserDetails_menu">
						 
						</ul>
                    	
                    </div>
                </div>
            </div>
        </div>
     <div id="right_side"><!-- right menu-->
     <div style="height:28px; background: url(images/chating_search-box.jpg) no-repeat;"><input type="text" name="chat" class="input_search" /></div>
     <div style="overflow-y: auto; width:195px; height:420px">
	 <ul id="onlineFrnds" class="right_menu">
						<li></li>
                       
					</ul></div>
        		
        </div><!-- End right menu-->
        <p class="clear" />
        
  </div>
    <!-- content -->



</div><!--End COntent Area-->
<div id="chat_windows" style="height:220px; width:225px; background:#0033CC; position: absolute;bottom: 0;right:383px;  visibility:hidden">
<!--chat box -->
	<div style="height:25px; width:100%; color:#FFF; background:#990033;  ">
    		<span style=" color:#FFFFFF; font:'Times New Roman', Times, serif; font-size:14px; float:left; margin-left:5px;margin-top: 3px;">				                 Surendra				       
             </span>
        	<span style="float:right; color:#FFFFFF; margin-right:5px;" id="chat_close"><a  style="color:#FFF" href="jacascript:closeChatWin()">X</a></span>
     </div>
    <div style="width:100%; height:150px">
    	<textarea name="chat" style="width:220px; height:150px;resize: none;  overflow-y: auto;" readonly="readonly" ></textarea>
     </div>
    <div style=" width:100%; height:43px; ">
    	<textarea name="chat_write" style="width:220px; height:43px;resize: none;  overflow-y: auto; "></textarea>
    </div>
</div>


<div id="chat_windows" style="height:220px; width:225px; background:#0033CC; position: absolute;bottom: 0;right:611px; visibility:hidden;">
	<div style="height:25px; width:100%; color:#FFF; background:#990033;"><span style=" color:#FFFFFF; font:'Times New Roman', Times, serif; font-size:14px; float:left; margin-left:5px;margin-top: 3px;">Sumit</span><span style="float:right; color:#FFFFFF; margin-right:5px;" id="chat_close"><a  style="color:#FFF" href="#">X</a></span></div>
    <div style="width:100%; height:150px"><textarea name="chat" style="width:220px; height:150px;resize: none;  overflow-y: auto; " readonly="readonly"></textarea></div>
    <div style=" width:100%; height:43px; "><textarea name="chat_write" style="width:220px; height:43px;resize: none;  overflow-y: auto; "></textarea></div>
</div>

<div id="chat_windows" style="height:220px; width:225px; background:#0033CC; position: absolute;bottom: 0;right:839px; visibility:hidden;">

	<div style="height:25px; width:100%; color:#FFF; background:#990033;"><span style=" color:#FFFFFF; font:'Times New Roman', Times, serif; font-size:14px; float:left; margin-left:5px;margin-top: 3px;">Ajay</span><span style="float:right; color:#FFFFFF; margin-right:5px;" id="chat_close"><a  style="color:#FFF" href="#">X</a></span></div>
    <div style="width:100%; height:150px"><textarea name="chat" style="width:220px; height:150px;resize: none;  overflow-y: auto;" readonly="readonly"></textarea></div>
    <div style=" width:100%; height:43px; "><textarea name="chat_write" style="width:220px; height:43px;resize: none;  overflow-y: auto; "></textarea></div>
</div>



<div id="chat_windows" style="height:220px; width:225px; background:#0033CC; position: absolute;bottom: 0;right:1067px; visibility:hidden;">
	<div style="height:25px; width:100%; color:#FFF; background:#990033;"><span style=" color:#FFFFFF; font:'Times New Roman', Times, serif; font-size:14px; float:left; margin-left:5px;margin-top: 3px;">Amit</span><span style="float:right; color:#FFFFFF; margin-right:5px;" id="chat_close"><a  style="color:#FFF" href="#">X</a></span>
    </div>
    <div style="width:100%; height:150px"><textarea name="chat" style="width:220px; height:150px;resize: none;  overflow-y: auto;"readonly="readonly" ></textarea></div>
    <div style=" width:100%; height:43px; "><textarea name="chat_write" style="width:220px; height:43px;resize: none;  overflow-y: auto; "></textarea></div>
</div>
<div class="footer" >
<!-- Footer Area-->
Copyright  &copy; U2opia Mobile Pvt. Ltd
</div>
<div class="footer_info">Design from <a href="http://www.u2opiamobile.com/">U2opia Mobile</a></div>

</body>
</html>
